<template>
	
	
	<div class="productinfo-box" style="margin-top:50px">
			<el-row>
				<el-col :span="6" align="center">属性类型：</el-col>
				<el-col :span="18">
					<el-select  size="medium" @change="handlePabChange"  v-model="productinfo.productAttributeCategoryId" clearable placeholder="请选择">
						 <el-option
							v-for="item in productAttributeCategoryList"
							:label="item.name"
							:key="item.id"
							:value="item.id"
						 ></el-option>
					 </el-select>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6" align="center">商品规格：</el-col>
				<el-col :span="18">
					<template v-for="item in specsList">
						<p>{{item.name}}</p>
						<template v-if="item.inputType == 1">
							<el-checkbox-group v-model="checkList[item.name]">
								<el-checkbox v-for="item2 in item.inputList" :key="item2" :label="item2">{{item2}}</el-checkbox>
								<!-- <el-checkbox label="亲亲"></el-checkbox>
								<el-checkbox label="弟弟"></el-checkbox>
								<el-checkbox label="哈哈"></el-checkbox> -->
							</el-checkbox-group>
						</template>
						<template v-if="item.inputType == 0">
							<el-tag
								v-for="tag in dynamicTags[item.name]"
								closable
								:key="tag"
								@close="handleClose(tag)"
							>{{tag}}</el-tag>
							<el-input
							v-if="inputVisible"
								 class="input-new-tag"
								 size="small"
								 ref="saveInputTag"
								 v-model="inputValue"
								  @blur="handleInputConfirm"
								   @keyup.enter.native="handleInputConfirm(item.name)"
							></el-input>
							<el-button v-else class="button-new-tag" size="small"  @click="showInput">新增</el-button>
						</template>
					</template>
					
					<el-table
						:data="skuData"
					>
						<el-table-column
							v-for="item in specsList"
							:label="item.name"
							:prop="item.name"
							
						></el-table-column>
						<el-table-column
							prop="sale"
							label="销量"
						>
							<template v-slot="vs">
								<el-input v-model="vs.row.sale"></el-input>
							</template>
						</el-table-column>
						<el-table-column
							prop="sale"
							label="库存"
						>
						<template v-slot="vs">
							<el-input v-model="vs.row.stock"></el-input>
						</template>
						</el-table-column>
						<el-table-column
							prop="sale"
							label="库存预警值"
						>
							<template v-slot="vs">
								<el-input v-model="vs.row.lowStock"></el-input>
							</template>
						</el-table-column>
						<el-table-column
							prop="sale"
							label="sku编号"
						>
							<template v-slot="vs">
								<el-input v-model="vs.row.skuId"></el-input>
							</template>
						</el-table-column>
					</el-table>
					<el-button @click="handleFlush" type="primary" size="medium">刷新列表</el-button>
				</el-col>
			</el-row>
			
			<el-row style="margin-top:30px;" v-if="specsList.length > 0">
				<el-col :span="6" align="center">属性图片：</el-col>
				<el-col :span="18">
					<div>
						<!-- 规格属性的第一个值，被选中了多少个， 这个地方就出现多少个。  specList:[{},{},{}]  确定谁是第一个值：specList[0].name  颜色     :   [红色,白色]-->
						<!--
							el-upload:
								action:文件上传的路径
								multiple:多文件
								limit:	最大允许上传个数
								file-list:上传的文件列表
								
								
						-->
						<div  v-for="zhi in checkList[specsList[0].name]" >
							
								<el-upload
									 action="http://8.129.190.90/fileUpload"
									 :file-list="fileList"
									 :before-upload="handlerUp(zhi)"
									 :on-success="fileUploadSuccess"
								>
								<el-button  size="medium" type="primary" @click="handlerUp(zhi)">点击上传</el-button>
								<p>{{zhi}}:只能上传jpg/png文件，且不超过10MB</p>
								</el-upload>
								
						</div>
						<div  v-for="zhi in dynamicTags[specsList[0].name]" >
							
							<el-upload
								 action="http://8.129.190.90//fileUpload"
								 :file-list="fileList"
								   :on-success="fileUploadSuccess"
							>
								<el-button  size="medium" type="primary" @click="handlerUp(zhi)">点击上传</el-button>
								<p>{{zhi}}:只能上传jpg/png文件，且不超过10MB</p>
							</el-upload>
							
							
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin-top:20px;">
				<el-col :span="6" align="center">商品参数：</el-col>
				<el-col :span="18">
					<el-row style="margin-bottom:20px;" v-for="vs in paramsList">
						<el-col :span="6">{{vs.name}}</el-col>
						<template v-if="vs.inputType == 0">
							<el-col :span="12">
								<el-input  size="medium" v-model="vs.inputList"></el-input>
							</el-col>
						</template>
						<template v-else>
							<el-col :span="12">
								<el-select size="medium" v-model="vs.inputListP">
									<el-option
										v-for="v in vs.inputList"
										:key="v"
									    :label="v"
									    :value="v"
											  
									>{{v}}</el-option>
								</el-select>
							</el-col>
						</template>
						
					</el-row>
				</el-col>
			</el-row>
			<el-row style="margin-top:20px;">
				
				<el-col align="center" :span="6">商品图片：</el-col>
				
				<el-col :span="18">
					<el-upload
					  action="http://8.129.190.90/fileUpload"
					  list-type="picture-card"
					  :file-list="fileList"
					  :on-preview="handlePictureCardPreview"
					  :on-success="handlePicSucess"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-col>
				
			</el-row>
			<el-row style="margin-top:20px;">
				<el-col :span="6">商品详情：</el-col>
				<el-col :span="18">
					<el-tabs v-model="activeName" type="card">
						   <el-tab-pane label="电脑端详情" name="first">
							   <div id="div1"></div>
						   </el-tab-pane>
						    <el-tab-pane label="移动端详情" name="second">
								<div id="div2"></div>
							</el-tab-pane>
					</el-tabs>
				</el-col>
			</el-row>
			<div class="btn-box" style="margin-top:100px">
				<el-button size="small" type="primary" @click="m1(-1)">上一步，填写促销信息</el-button>
				<el-button size="small" type="primary" @click="m1(1)">下一步，填写商品关联</el-button>
			</div>
		</div>
</template>

<script>
	import {getProductAttributeCategoryList,getAttributeByCid} from '@/api/attr.js'
	import E from "wangeditor"
	
	
	export default {
		data(){
			return {
				editor1:'',
				editor2:'',
				activeName:"first",
				flist:[],
				 dialogImageUrl: '',
				dialogVisible: false,
				hellowo:[],
				zhi:'',
				fileList:[],
				skuData:[],
				specsList:[], //规格列表
				dynamicTags: {},
				productAttributeCategoryList:[],
				inputValue:'',
				inputVisible:false,
				// checkList:["天","地","君","亲亲"]
				checkList:{},
				paramsList:[]
				// checkList:{
				// 	"颜色":['红色','白色','黄色'],
				// 	'尺码':['39','33']
				// }
			}
		},
		watch:{
			checkList:{
				 deep:true, //深度监听设置为 true
				 handler:function(n){
					console.log("checkList,改变了",n)
					this.productinfo.productAttributeValueList = []
					console.log("hello...")
					//当选中的内容发生改变
					// 一旦checkList发生改变，就组合所有的checkList以及dymic内容，全部重新生成结果
					let c = [];
					for(let x in this.checkList){
						c[x] = this.checkList[x];
					}
					
					for(let y in this.dynamicTags){
						c[y] =  this.dynamicTags[y];
					}
					
					console.log("c-->"+c)
					/*
						{
								"颜色":["红色","黄色","白色"],
								"尺码":[33,36,29]
						}
					*/
					
					for(let x in c){
						
						let obj = {
						   "id": 0,						//
						   "productAttributeId": 0,		//产品的属性id			7
						   "productId": 0,				//产品id
						   "value": "string"				//属性值				黑色,红色
						}
						
						let val = c[x];
						obj.value = val.join(",");  // 红色，白色，黄色
						this.specsList.forEach(item=>{
							if(item.name == x){
								obj.productAttributeId = item.id;
							}
						})
						
						 this.productinfo.productAttributeValueList.push(obj);
					}
					
				 }
			},
			
			// checkList(n){
			
			
			// },
			dynamicTags:{
					deep:true,
					handler:function(n){
				console.log("dynamicTags,改变了",n);
				this.productinfo.productAttributeValueList = []
				//当选中的内容发生改变
				// 一旦checkList发生改变，就组合所有的checkList以及dymic内容，全部重新生成结果
				let c = [];
				for(let x in this.checkList){
					c[x] = this.checkList[x];
				}
				
				for(let y in this.dynamicTags){
					c[y] =  this.dynamicTags[y];
				}
				/*
					{
							"颜色":["红色","黄色","白色"],
							"尺码":[33,36,29]
					}
				*/
				
				
							
				
				for(let x in c){
					
					let obj = {
					   "id": 0,						//
					   "productAttributeId": 0,		//产品的属性id			7
					   "productId": 0,				//产品id
					   "value": "string"				//属性值				黑色,红色
					}
					
					let val = c[x];
					obj.value = val.join(",");  // 红色，白色，黄色
					this.specsList.forEach(item=>{
						if(item.name == x){
							obj.productAttributeId = item.id;
						}
					})
					
					 this.productinfo.productAttributeValueList.push(obj);
				}
			}
		},
		skuData:{
			deep:true, 
			handler:function(n){
				//将skuData转换成skuStockList
				this.productinfo.skuStockList = [];
				
				n.forEach(item=>{
					
					let is = [];
					for(let i in item){
						if(i != "lowStock" && i != "sale" && i != "stock" && i != "skuId"){
							is.push({key:i,value:item[i]});
						}
					}
					
					let o = {
						  "id": 0,
						  "lockStock": 0,
						  "lowStock": item.lowStock,
						  "pic": "string",
						  "price": 0,
						  "productId": 0,
						  "promotionPrice": 0,
						  "sale": item.sale,
						  "skuCode": item.skuId,
						  "spData": JSON.stringify(is), //	[{key:尺寸,value:M},{key:颜色,value:黑色}]
						  "stock":item.stock,
					}
					this.productinfo.skuStockList.push(o);
				})
			}
		}
			},
		props:["pageNum","productinfo"],
		mounted() {
			
			this.editor1 = new E("#div1")
			this.editor2 = new E("#div2")
			this.editor1.create();
			this.editor2.create();
			
			
			
			getProductAttributeCategoryList()
			.then(resp=>{
				this.productAttributeCategoryList = resp.data.list;
			})
		},
		methods:{
			handlePicSucess(response,file,fileList){
				console.log("ok")
				let tarr = []
				fileList.forEach(item=>{
					let s = "http://8.129.190.90"+item.response.msg;
					tarr.push(s);
				})
				this.productinfo.pic = tarr.join(",");
				console.log(this.productinfo.pic)
			},
			 handleRemove(file, fileList) {
				console.log(file, fileList);
			  },
			  handlePictureCardPreview(file) {
				  console.log("handlePictureCardPreview")
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			  },
			handlerUp(zhi){
				console.log(zhi);
				this.zhi = zhi;
			},
			fileUploadSuccess(response, file, fileList){
				console.log(response, file, fileList)
				if(response && response.code == 200){
					//获取上传图片的访问路径
					let url = "http://8.129.190.90"+response.msg;
					//这张图片，是属于哪个属性的 --设置所有的sku里面包含黑色的sku的图片
					this.productinfo.skuStockList.forEach(item=>{
						if(item.spData.includes(this.zhi)){
							item.pic = url;
						}
					})
					// console.log("success",url)
				}
				console.log("--->",this.productinfo.skuStockList);
			},
			handleFlush(){
				this.skuData=[];
				//根据checkList和dynamicTags生成skuData
				
				let c = [];
				for(let x in this.checkList){
					c[x] = this.checkList[x];
				}
				
				for(let y in this.dynamicTags){
					c[y] =  this.dynamicTags[y];
				}
				
				
				let arr = [];		//最终结果
				
				let index = 0;
				for(let key in c){
					// key  颜色  尺寸   材质
					//创建一个新的数组
					let ar = []
					//复制原本的值
					ar = JSON.parse(JSON.stringify(arr));
					arr = [];
					
					
					c[key].forEach(item=>{
						//装值， 颜色：红色   颜色：黄色   尺寸:5.5    尺寸：6.0  尺寸 3.5    材质：真皮   材质：假皮
						// 如果之前装了颜色，坚决不能再装颜色，
						//将之前的值全部拼接上当前值，然后就出了一个新的结果
						if(index == 0){
							arr.push({
								[key]:item
							})
						}else{
							
							//添加值，然后添加到新的数组
							ar.forEach(i=>{
								let ii = JSON.parse(JSON.stringify(i));
								ii[key] = item;
								arr.push(ii);
							})
							
						}
					})
					//说明肯定过了第一次
					index++;
					
				}
				arr.forEach(item=>{
					item.sale = '';
					item.stock = '';
					item.lowStock = '';
					item.skuId = '';
					this.skuData.push(item)
				})
				
				
				
			},
			handlePabChange(id){
				this.dynamicTags = {}; //vue
				this.checkList = {};
				//根据id值查找对应商品分类的规格参数以及商品参数
				console.log("商品类型",id);
				getAttributeByCid(id,0)
				.then(resp=>{
					//规格列表
					this.specsList = resp.data.list;
					console.log("规格参数:",this.specsList)
					this.specsList.forEach(item=>{
						let iname = item.name;
						if(item.inputType == 1){  //使用多选框
							//提前转   红色,白色,紫色
							item.inputList = item.inputList.split(",");
							// this.optList.add()
							// this.checkList.push({
							// 	iname:[]
							// }) {}
							//这些是后面添加到对象里面去的，可能没有接受vue的双向绑定。
							// this.checkList[iname] = [];
							//只有一些特殊的方法，被vue包裹了
							this.$set(this.checkList,iname,[])
						}else if(item.inputType == 0){
							// this.dynamicTags.push({
							// 	iname:[]
							// })
							// this.dynamicTags[iname] = [];
							this.$set(this.dynamicTags,iname,[])
						}
					})
				})
				
				getAttributeByCid(id,1)
				.then(resp=>{
					this.paramsList = resp.data.list;
					this.paramsList.forEach(item=>{
						if(item.inputType == 1){
							item.inputList = item.inputList.split(",");
						}
					})
				})
			},
			showInput(){
				this.inputVisible = true;
				console.log("inputVisible..")
				this.$nextTick(_ => {
				  this.$refs.saveInputTag[0].$refs.input.focus();
				});
			},
			handleClose(tag){
				 this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			m1(num){
				//触发自定义函数
				if(num == 1){
					this.paramsList.forEach(item=>{
						item.inputList = item.inputListP;
						//必须和productinfo进行关联才有作用  --先放在这里
						//  TODO
						//  TODO
						//	TODO
					})
					
					//设置详情的值
					this.productinfo.detailHtml = this.editor1.txt.html();
					this.productinfo.detailMobileHtml = this.editor2.txt.html();
					
				}
				this.$emit("changeStatus",parseInt(this.pageNum)+num);
				
			},
			 handleInputConfirm(iname) {
				let inputValue = this.inputValue;
				if (inputValue) {
				  this.dynamicTags[iname].push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			  }
		}
	}
</script>

<style lang="scss" scoped="scoped">
	 .el-tag + .el-tag {
	    margin-left: 10px;
	  }
	  .button-new-tag {
	    margin-left: 10px;
	    height: 32px;
	    line-height: 30px;
	    padding-top: 0;
	    padding-bottom: 0;
	  }
	  .input-new-tag {
	    width: 90px;
	    margin-left: 10px;
	    vertical-align: bottom;
	  }
</style>
